<template>
	<view>
		<u-gap height="20rpx" bg-color="#f5f5f5"></u-gap>

		<view class="box">
			<u-cell title="+86">
				<template #value>
					<view class="input_box">
						<u-input placeholder="请输入您的手机号" border="none" v-model="mobile"></u-input>
					</view>
				</template>

			</u-cell>

			<u-cell title="验证码">
				<template #value>
					<view class="input_box">
						<u-input placeholder="请输入短信验证码" v-model="code" border="none">
							<template #suffix>
								<view class="get_code">
									<u-line direction="col" length="44rpx" color="#ccc"></u-line>
									<text style="color: #FABB3C;" v-if="time==0" @click="get_code">发送验证码</text>
									<text v-else style="color: #ccc;">{{time}}后获取</text>
								</view>
							</template>
						</u-input>
					</view>
				</template>
			</u-cell>

			<u-cell title="新密码">
				<template #value>
					<view class="input_box">
						<u-input placeholder="密码至少六位，包含字母数字" v-model="password" border="none" :password="true"></u-input>
					</view>
				</template>
			</u-cell>

			<u-cell title="确认新密码">
				<template #value>
					<view class="input_box">
						<u-input placeholder="密码至少六位，包含字母数字" v-model="passwordA" border="none" :password="true"></u-input>
					</view>
				</template>
			</u-cell>
		</view>

		<view class="submit">
			<u-button color="#FABB3C" shape="circle" @click="send">确定</u-button>
		</view>
	</view>
</template>

<script>
	import {
		sendSmsCode,
		resetPassword
	} from '@/services/api/auth';
	import {updatepassword} from '@/services/api/index'
	export default {
		data() {
			return {
				time: 0,
				mobile:'',
				password:'',
				code:'',
				passwordA:''
			}
		},
		methods: {
			get_code(){
				sendSmsCode({
					mobile:this.mobile,
					scene:'3'
				})
			},
			async send(){
				if(this.password!=this.passwordA){
					uni.showToast({
						icon:'none',
						title:'密码不一致请重新输入',
					})
					return
				}
				let data={
					password:this.password,
					code:this.code
				}
				await updatepassword(data)
				uni.showToast({
					icon:'none',
					title:'修改成功'
				})
				setTimeout(()=>{
					uni.navigateBack()
				},500)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.box {
		background-color: #fff;

		.input_box {
			width: 470rpx;

			.get_code {
				display: flex;
				align-items: center;

				text {
					margin-left: 12rpx;
					flex: 1;
				}
			}
		}


	}

	.submit {
		padding: 0 30rpx;
		margin-top: 64rpx;
	}
</style>